/*
 * @Author: xiaosihan 
 * @Date: 2024-08-18 20:12:42 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-01 22:11:18
 */


import { Slider, Tree, TreeDataNode } from "antd";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import partCollaborateStore from "../../partCollaborateStore";
import DragModel from "../DragModel/DragModel";
import styles from "./modelTree.module.less";
import meshIconPNG from "./meshIcon.png";
import dragModelStore from "../DragModel/dragModelStore";

interface Iprops {
    children?: ReactNode
}

// 模型爆炸图
export default function ModelBlast() {

    const [blastProgress, setBlastProgress] = useState(partCollaborateStore.blastProgress);
    const [visible, setVisible] = useState(true);
    useEffect(() => autorun(() => {
        const { showList } = dragModelStore;
        if (!showList.includes("model_blast")) {
            partCollaborateStore.setBlastProgress(0);
            setVisible(false);
        } else {
            setVisible(true);
        }
    }), []);

    return (
        <DragModel
            id="model_blast"
            title="模型爆炸图"
            orginLeft={50}
            orginTop={200}
        >
            <div className={styles.tree_container}>
                <div className={styles.marks} >
                    <span className={styles.mark} >0</span>
                    <span className={styles.mark} >20</span>
                    <span className={styles.mark} >40</span>
                    <span className={styles.mark} >60</span>
                    <span className={styles.mark} >80</span>
                    <span className={styles.mark} >100</span>
                </div>
                <Slider
                    className={styles.slider}
                    defaultValue={0}
                    min={0}
                    max={1}
                    step={0.01}
                    onChange={v => {
                        partCollaborateStore.setBlastProgress(v);
                    }}
                    styles={{
                        track: {
                            background: '#5503FA',
                        },
                        rail: {
                            background: "#ffffff",
                        },
                        handle: {
                            background: "#96FF64",
                            borderColor: "#96FF64",
                        }
                    }}
                />
            </div>
        </DragModel>
    );

}